<template>
  <div class="container">
    <h3>
      单选题
      <span>
        {{cur}}
        <small>/ {{list.length}}</small>
      </span>
    </h3>
    <div class="swiper-container active-banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in list" :key="index">
          <h4>{{item.question}}</h4>
          <div
            class="item"
            v-for="(it,ind) in item.option"
            :class="{'active':it.isanswer==1,'error':it.my_answer==1&&it.isanswer==0}"
            :key="ind"
          >{{ind==0?'A':''}}{{ind==1?'B':''}}{{ind==2?'C':''}}{{ind==3?'D':''}}.{{it.option_info}}</div>
        </div>
      </div>
    </div>
    <div class="btn" @click="goQuestion">{{cur==list.length?'返回':"下一题"}}</div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      rule: "",
      text_tip: "",
      list: [],
      cur: 1,
      id: "",
      swiper: ""
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.get_question(this.id);
  },
  methods: {
    get_question(id) {
      var that = this;
      this.$api.get_history_question(id).then(res => {
        if (res.status == 1) {
          this.list = res.data;
          if (this.list.length > 1) {
            setTimeout(() => {
              that.swiper = new Swiper(".active-banner", {
                autoplay: false,
                spaceBetween: 20,
                observeParents: true,
                effect: "slide",
                autoplayDisableOnInteraction: false,
                onSlideChangeStart: function(swipers) {
                  that.cur = swipers.realIndex + 1;
                },
                paginationClickable: false
                // 如果需要分页器
              });
            }, 100);
          }
        } else {
          this.$router.go(-1);
        }
      });
    },
    goQuestion() {
      if (this.cur != this.list.length) {
        if (this.swiper) {
          this.swiper.slideTo(this.cur, 500, true);
        }
      } else {
        this.$router.go(-1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  // width: 100%;
  min-height: 100vh;
  background: url(../.././img/yue/2.png) no-repeat #C0292C;
  background-size: cover;
  padding: 30px 20px;
  h3 {
    font-size: 24px;
    font-weight: 400;
    color: #ffdf7a;
    overflow: hidden;
    span {
      float: right;
      color: #fff;
      small {
        font-size: 16px;
      }
    }
  }
  .active-banner {
    margin-top: 30px;
    .swiper-slide {
      width: 338px;
      padding: 30px 20px;
      background: rgba(255, 255, 255, 1);
      border: 3px solid rgba(255, 253, 253, 1);
      border-radius: 10px;
    }
  }
  h4 {
    font-size: 17px;
    line-height: 24px;
    color: #000;
    font-weight: 400;
  }
  .item {
    font-size: 16px;
    width: 296px;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 12px 1px rgba(162, 162, 162, 0.3);
    border-radius: 23px;
    line-height: 48px;
    text-align: center;
    margin: 30px auto 0;
    &.active {
      background: rgba(102, 205, 62, 1);
      position: relative;
      box-shadow: 0px 4px 12px 1px rgba(84, 105, 71, 0.3);
      color: #fff;
      &:after {
        content: "";
        width: 16px;
        height: 16px;
        background: url(../.././img/yue/v.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
      }
    }
    &.error {
      background: rgba(226, 56, 56, 1);
      position: relative;
      box-shadow: 0px 4px 12px 1px rgba(162, 162, 162, 0.3);
      color: #fff;
      &:after {
        content: "";
        width: 16px;
        height: 16px;
        background: url(../.././img/yue/x.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
      }
    }
  }
  .des {
    display: block;
    line-height: 18px;
    white-space: pre-wrap;
    font-size: 15px;
    color: #ffdf7a;
    margin: 20px 0 0;
    font-weight: bold;
  }
  .btn {
    width: 162px;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 12px 1px rgba(162, 162, 162, 0.3);
    border-radius: 24px;
    color: #9d100f;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    margin: 20px auto;
  }
}
</style>